<!DOCTYPE html>
<html lang="zh-CN">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>uni_app修改radio与checkbox选择按钮样式</title>
	<!--
    https://www.cnblogs.com/yoona-lin/p/13657404.html
    https://ask.dcloud.net.cn/question/63338
    https://blog.csdn.net/memedadexixaofeifei/article/details/105654740
   -->
	<style>
		* {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}
	</style>
</head>

<body>
	<!--
    <checkbox-group>
			<checkbox v-for="(item,index) of list" :key="index" :value="item.value" checked>{{item.name}}</checkbox>
		</checkbox-group>


数据
    list: [{
			value: "USA",
			name: "中国"
		}, {
			value: "USA",
			name: "美国"
		}, {
			value: "USA",
			name: "英国"
		}, {
			value: "USA",
			name: "法国"
		}, {
			value: "USA",
			name: "俄罗斯"
		}, {
			value: "USA",
			name: "印度"
		}]


样式

  checkbox-group {
		background-color: rgba(0, 0, 0, 0.1);
		display: grid;
		gap: 10rpx;
		grid-template-columns: repeat(auto-fill, 200rpx);
	}

	checkbox {
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
	}

	checkbox .wx-checkbox-input {
		width: 38rpx;
		height: 38rpx;
		margin: 0rpx;
		margin-right: 8rpx;
		box-sizing: border-box;
		border: 1rpx solid #c8c9cc;
		border-radius: 10rpx;
		overflow: hidden;
		transition: all 0.25s;
	}

	checkbox .wx-checkbox-input::before {
		font-size: 30rpx !important;
		box-sizing: border-box;
		opacity: 0;
		transition: all 0.25s;
	}

	checkbox .wx-checkbox-input-checked {
		background-color: #2979ff;
		border-color: #2979ff;
	}

	checkbox .wx-checkbox-input-checked::before {
		opacity: 1;
		color: #fff;
	}
   -->

	<!--
  radio
    /* 选中后的 背景样式 （红色背景 无边框 可根据UI需求自己修改） */
    radio .wx-radio-input.wx-radio-input-checked{
        background: #CA5F4B;
        border: 1px solid #CA5F4B;
    }
    /* 选中后的 对勾样式 （白色对勾 可根据UI需求自己修改） */
    radio .wx-radio-input.wx-radio-input-checked::before{
        color: #ffffff;
    }
   -->
</body>
<script>
	"use strict"; {
	};
</script>

</html>